<template>
    <view class="u-wrap">
        <u-navbar
            title="商品分类"
            title-color="#FFFFFF"
            :is-fixed="true"
            :is-back="false"
            :background="background"
            :border-bottom="false"
            >
        </u-navbar>
        <view class="u-menu-wrap">
            <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop" >
                <view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']"
                    @tap.stop="swichMenu(index)">
                    <text class="u-line-1 u-m-l-20 u-m-r-20">{{item.name}}</text>
                </view>
            </scroll-view>
            <block v-for="(item , index) in tabbar" :key="index">
                <scroll-view scroll-y class="right-box" v-if="current == index">
                    <view class="page-view">
                        <view v-if="item.adv_image">
                            <u-image  width="100%" height="200" :src="item.adv_image" @click="jumpAdvLink(item.adv_image_link)"></u-image>
                        </view>
                        <view class="class-item">
                            <view class="two-class-item" v-for="(towItem, towIndex) in item.children" :key="towIndex">
                                <view class="item-title">
                                    <text>{{towItem.name}}</text>
                                </view>
                                <view class="item-container">
                                    <view class="thumb-box" v-for="(threeItem, threeIndex) in towItem.children" :key="threeIndex" @click="jumpCatList(threeItem.category_id, item.category_id)">
                                        <u-image  width="80rpx" height="80rpx" :src="threeItem.image"></u-image>
                                        <view class="item-menu-name">{{threeItem.name}}</view>
                                    </view>
                                </view>
                                <view v-if="towItem.children.length==0" style="text-align: center;font-size: 24rpx;">
                                    <text>无子分类</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </block>
        </view>
        <u-no-network></u-no-network>
    </view>
</template>
<script>
    import * as API_Goods from '@/api/goods.js';

    export default {
        data() {
            return {
                background: {
                    background: '#ff5000'
                },
                scrollTop: 0, //tab标题的滚动条位置
                current: 0, // 预设当前项的值
                menuHeight: 0, // 左边菜单的高度
                menuItemHeight: 0, // 左边菜单item的高度
                tabbar: [],
                networkType: '' //网络状态
            }
        },
        onLoad() {
            let $this = this
            //获取网络类型
            uni.getNetworkType({
                success(res) {
                    $this.networkType = res.networkType
                    if (res.networkType !== 'none') {
                        // 调用getCategory接口
                        $this.getCategory(0);
                    }
                }
            })
        },
        onShow() {
            let $this = this
            //监听网络状态变化
            uni.onNetworkStatusChange(res => {
                //监听到有网络并且第一次没有加载数据的情况下初始化数据
                if (res.isConnected && $this.networkType === 'none') {
                    $this.getCategory(0);
                }
            })
        },
        //下拉刷新重新获取数据
        onPullDownRefresh(){
            setTimeout(() => {
                this.getCategory()
                uni.stopPullDownRefresh()
            }, 1000)
        },
        methods: {
            getCategory() {
                API_Goods.getCategory().then(res => {
                    //小程序发布需过滤医药及食品类目
                    // const data = res.filter(key=> key.category_id != 85 && key.category_id != 4)
            		this.tabbar = res;
            	});
            },
            // 点击左边的栏目切换1
            async swichMenu(index) {
              if(index == this.current) return ;
              this.current = index;
              // 如果为0，意味着尚未初始化
              if(this.menuHeight == 0 || this.menuItemHeight == 0) {
              	await this.getElRect('menu-scroll-view', 'menuHeight');
              	await this.getElRect('u-tab-item', 'menuItemHeight');
              }
              // 将菜单菜单活动item垂直居中
              this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
            },
            // 获取一个目标元素的高度
            getElRect(elClass, dataVal) {
                new Promise((resolve, reject) => {
                    const query = uni.createSelectorQuery().in(this);
                    query.select('.' + elClass).fields({size: true},res => {
                    	// 如果节点尚未生成，res值为null，循环调用执行
                    	if(!res) {
                    		setTimeout(() => {
                    			this.getElRect(elClass);
                    		}, 10);
                    		return ;
                    	}
                    	this[dataVal] = res.height;
                    }).exec();
                })
            },
            //  点击一级分类跳转
            jumpAdvLink(url){
                uni.navigateTo({
                    url: url
                });
            },
            //TODO 点击跳转到搜索列表页
            jumpCatList(category, catId){
                uni.navigateTo({
                    url: `/goods-module/goods-list?category=${category}&catId=${catId}`
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .u-wrap {
        height: calc(100vh);
        /* #ifdef H5 */
        height: calc(100vh - var(--window-top));
        /* #endif */
        display: flex;
        flex-direction: column;
    }
    .u-menu-wrap {
        flex: 1;
        display: flex;
        overflow: hidden;
    }

    .u-tab-view {
        width: 200rpx;
        height: 100%;
    }

    .u-tab-item {
        height: 110rpx;
        background: #f6f6f6;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #444;
        font-weight: 400;
        line-height: 1;
    }

    .u-tab-item-active {
        position: relative;
        color: #000;
        font-size: 30rpx;
        font-weight: 600;
        background: #fff;
    }

    .u-tab-item-active::before {
        content: "";
        position: absolute;
        border-left: 4px solid #ff5000;
        height: 32rpx;
        left: 0;
        top: 39rpx;
    }

    .u-tab-view {
        height: 100%;
    }

    .right-box {
        background-color: rgb(250, 250, 250);
    }

    .page-view {
        padding: 16rpx;
        /* #ifdef H5 */
        padding-bottom: 100rpx;
        /* #endif */
    }

    .class-item {
        .two-class-item {
            background-color: #fff;
            margin-bottom: 30rpx;
            padding: 16rpx;
            border-radius: 8rpx;
        }
    }

    .class-item:last-child {
        min-height: 100vh;
    }

    .item-title {
        font-size: 26rpx;
        color: $u-main-color;
        font-weight: bold;
    }

    .item-menu-name {
        font-weight: normal;
        font-size: 24rpx;
        color: $u-main-color;
        overflow: hidden;
        width: 150rpx;
        height: 35rpx;
        text-align: center;
    }

    .item-container {
        display: flex;
        flex-wrap: wrap;
    }

    .thumb-box {
        width: 33.333333%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: 20rpx;
    }

    .item-menu-image {
        width: 120rpx;
        height: 120rpx;
    }
</style>
